<template>
  <view class="login">
    <!-- 头-->
    <IndexHeader></IndexHeader>
    <!-- 标题 -->
    <view class="login_title">
      <h2>找回密码</h2>
      <text>Find password</text>
    </view>

    <!-- 表单-->
    <view class="form">
      <template v-if="isNext">
        <view class="form-item">
          <label for="">邮箱</label>
          <input type="email" placeholder="邮箱" v-model="findpwd.email" />
        </view>
        <view class="form-item">
          <label for="">验证码</label>
          <input v-model="findpwd.validCode" type="text" placeholder="验证码(6个字符)" />
          <view class="get_code" @click="emailValidCode">
            {{ getCodeTxt }}
          </view>
        </view>
      </template>
      <template v-else>
        <view class="form-item">
          <label for="">手机号</label>
          <input type="text" placeholder="手机号" v-model="findpwd.phone" />
        </view>
        <view class="form-item">
          <label for="">密码</label>
          <input v-model="findpwd.password" :password="!eye" placeholder="密码必须字母开头" />
          <uni-icons @click="eye = !eye" :type="eye ? 'eye' : 'eye-slash'" size="20" color="#b1afaf">
          </uni-icons>
        </view>
      </template>

      <text class="forget" @click="gotoLogin">已有账号,立即登录</text>
    </view>
    <!-- 按钮-->
    <view class="btn">
      <view class="login_btn" @click="checkValidCode">
        {{ isNext ? "下一步" : "提交" }}
      </view>
      <view @click="gotoLogin" class="register_btn" v-show="!isNext">
        返回
      </view>
    </view>
  </view>
</template>

<script>
  import IndexHeader from "../../../../components/index_header/index_header.vue";
  import {
    req
  } from "../../../utils/request/request";
  import {
    uniToast
  } from "../../../utils/uni/uni";
  export default {
    components: {
      IndexHeader,
    },
    data() {
      return {
        getCodeTxt: "发送验证码",
        isDisabeld: false,
        isNext: true,
        eye: false,
        findpwd: {
          email: "",
          validCode: "",
          phone: "",
          password: "",
        },
      };
    },
    methods: {
      /* 获取验证码*/
      emailValidCode() {
        if (
          !/^[A-Za-z0-9\u4e00-\u9fa5]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(
            this.findpwd["email"]
          )
        ) {
          uniToast("邮箱格式错误");
          return;
        }
        if (this.isDisabeld) return;
        req("emailValidCode", {
          method: "POST",
          reqData: {
            email: this.findpwd["email"],
          },
        }).then(
          (res) => {
            this.disabledGetCode(true);
            uniToast(res["data"]["msg"]);
          },
          (err) => {
            console.log(err);
          }
        );
      },
      disabledGetCode(val) {
        clearInterval(this.timer);
        this.isDisabeld = val;
        var count = 60;
        this.timer = setInterval(() => {
          this.getCodeTxt = `${count}秒后获取`;
          count -= 1;
          if (count <= 0) {
            clearInterval(this.timer);
            this.getCodeTxt = "发送验证码";
            this.isDisabeld = false;
          }
        }, 1000);
      },

      /* 验证验证码 */
      checkValidCode() {
        if (this.isNext) {
          if (!this.findpwd["validCode"]) {
            uniToast("验证码不能为空!");
            return;
          }
          req("checkValidCode", {
            reqData: {
              validCode: this["findpwd"]["validCode"],
            },
            method: "POST",
          }).then(
            ({
              data: res
            }) => {
              if (res["code"] !== "K002") {
                this.isNext = !this.isNext;
              }
              uniToast(res["msg"]);
            },
            (err) => {
              console.log(err);
            }
          );
        } else {
          this.retrievePassword();
        }
      },

      /* 找回密码*/
      retrievePassword() {
        req("retrievePassword", {
          reqData: {
            phone: this["findpwd"]["phone"],
            password: this["findpwd"]["password"],
          },
          method: "POST",
        }).then(
          ({
            data: res
          }) => {
            if (res["code"] === "L001") {
              uni.navigateTo({
                url: "/pages/login/login",
              });
            }
            uniToast(res["msg"]);
          },
          (err) => {
            console.log(err);
          }
        );
      },

      gotoLogin() {
        uni.navigateTo({
          url: "/pages/login/login",
        });
      },
    },
  };
</script>

<style lang="scss" scoped>
  page {
    position: relative;
    height: 100vh;
    overflow: hidden;
  }

  .login {
    height: 100vh;

    .isRegister {
      position: absolute;
      background-color: #0000008c;
      height: 100%;
      top: 0;
      left: 0;
      right: 0;
    }

    .login_title {
      color: #808080;
      padding: 0 20rpx;

      text {
        font-size: 28rpx;
        margin: 50rpx 0;
        display: block;
      }
    }

    .form {
      padding: 0 50rpx;

      font-size: 24rpx;

      .form-item {
        display: flex;
        align-items: center;
        height: 100rpx;
        border-bottom: #ddd solid 2rpx;

        .get_code {
          background-color: #0c34ba;
          color: #fff;
          font-size: 24rpx;
          padding: 10rpx;
        }

        input {
          font-size: 24rpx;
          flex: 1;
        }

        label {
          width: 150rpx;
        }
      }

      .forget {
        float: right;
        margin-top: 40rpx;
        color: #808080;
      }
    }

    .btn {
      font-size: 24rpx;
      color: #fff;
      padding: 0 50rpx;
      margin-top: 200rpx;

      .login_btn,
      .register_btn {
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #0c34ba;
        border-radius: 50rpx;
        margin-top: 100rpx;
      }

      .register_btn {
        background-color: #fff;
        color: #333;
        border: #ddd 2rpx solid;
      }
    }

    .RegisterToast {
      background-color: #fff;
      padding: 30rpx;
      font-size: 28rpx;
      position: absolute;
      left: 0;
      right: 0;
      bottom: -100%;
      z-index: 1;
      transition: all 0.3s linear;

      &.show {
        bottom: 0;
      }

      .header {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin-bottom: 80rpx;

        .header_title {
          font-weight: bold;
          font-size: 38rpx;
          color: #808080;
        }
      }

      .form {
        .form-item {
          display: flex;
          height: 80rpx;
          align-items: center;
          padding: 0 40rpx;

          input {
            flex: 1;
            font-size: 24rpx;
          }

          label {
            font-size: 24rpx;
            width: 150rpx;
          }
        }
      }

      .submit {
        background-color: #0c34ba;
        color: #fff;
        border-radius: 50rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        height: 70rpx;
        margin: 0 30rpx;
        margin-top: 80rpx;
        font-size: 24rpx;
      }
    }
  }
</style>
